<script setup>
  import { ElMessageBox } from 'element-plus'
  import { ref,computed } from 'vue'
  const data = ref([
  {
    "id": 1,
    "term": "2024-2025-2",
    "courseName": "数据结构与算法",
    "teacher": "李明",
    "location": "教学楼A301",
    "weeks": [1, 2, 3, 4, 5, 6, 7, 8, 9],
    "day": "周一",
    "slot": 1
  },
  {
    "id": 2,
    "term": "2024-2025-2",
    "courseName": "操作系统",
    "teacher": "王丽",
    "location": "教学楼B201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周一",
    "slot": 3
  },
  {
    "id": 3,
    "term": "2024-2025-2",
    "courseName": "计算机网络",
    "teacher": "张伟",
    "location": "教学楼C101",
    "weeks": [1, 2, 3, 4, 5, 6, 7, 8, 9],
    "day": "周二",
    "slot": 2
  },
  {
    "id": 4,
    "term": "2024-2025-2",
    "courseName": "数据库原理",
    "teacher": "刘芳",
    "location": "教学楼D202",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周二",
    "slot": 3
  },
  {
    "id": 5,
    "term": "2024-2025-2",
    "courseName": "软件工程",
    "teacher": "陈刚",
    "location": "教学楼E301",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周二",
    "slot": 4
  },
  {
    "id": 6,
    "term": "2024-2025-2",
    "courseName": "人工智能",
    "teacher": "赵敏",
    "location": "教学楼F201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周三",
    "slot": 5
  },
  {
    "id": 7,
    "term": "2024-2025-2",
    "courseName": "计算机组成原理",
    "teacher": "孙浩",
    "location": "教学楼G101",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周四",
    "slot": 2
  },
  {
    "id": 8,
    "term": "2024-2025-2",
    "courseName": "离散数学",
    "teacher": "周艳",
    "location": "教学楼H202",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周四",
    "slot": 3
  },
  {
    "id": 9,
    "term": "2024-2025-2",
    "courseName": "编译原理",
    "teacher": "吴磊",
    "location": "教学楼I301",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周五",
    "slot": 2
  },
  {
    "id": 10,
    "term": "2024-2025-2",
    "courseName": "信息安全",
    "teacher": "郑晓",
    "location": "教学楼J201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周五",
    "slot": 4
  },
  {
    "id": 11,
    "term": "2024-2025-1",
    "courseName": "新手保护期",
    "teacher": "陈证明",
    "location": "教学楼A201",
    "weeks": [1,2,3, 4,5, 6,7, 8,9, 10,11, 12,13, 14,15, 16,17, 18],
    "day": "周五",
    "slot": 4
  }
])


  //学期
  const term = ref('2024-2025-2')
  
  // 创建一个计算属性来组织课程数据
  const organizedCourses = computed(() => {
    // 根据学期筛选课程数据
    const filteredData = data.value.filter(course => course.term === term.value)
    // 初始化一个二维数组，行对应时间 slot，列对应星期 day
    const coursesByDayAndSlot = Array.from({ length: 5 }, () => 
      Array.from({ length: 7 }, () => null)
    )
    // 填充课程数据
    filteredData.forEach(course => {
      const dayIndex = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].indexOf(course.day)
      if (dayIndex !== -1 && course.slot > 0 && course.slot <= 5) {
        coursesByDayAndSlot[course.slot - 1][dayIndex] = course
      }
    })
    return coursesByDayAndSlot
  })

  //计算周
  const targetDate = new Date('2024-02-24')
  const currentDate = new Date()
  
  if (currentDate.getFullYear() > targetDate.getFullYear()) {
    targetDate.setFullYear(currentDate.getFullYear())
  }
  
  const diffTime = currentDate - targetDate
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  const week = ref(Math.floor(diffDays / 7)+1)

//改变周数
const changeWeek = (delta) => {
  if(week.value + delta > 0&& week.value + delta <= 18)
  week.value += delta;
}

//显示课程
const showCourse = (course) => {
  ElMessageBox({
    title:'课程信息',
     message: `
      <p><strong>周次：</strong>${course.weeks.join(', ')}</p>
      <p><strong>课程名：</strong>${course.courseName}</p>
      <p><strong>地点：</strong>${course.location}</p>
      <p><strong>教师：</strong>${course.teacher}</p>
    `,
    dangerouslyUseHTMLString: true, // 允许消息内容使用HTML
    showCancelButton: false,
    confirmButtonText: '关闭',
  })
}
</script>

<template>
  <div>
    <button @click="changeWeek(-1)">-</button><span>第{{week}}周</span><button @click="changeWeek(1)">+</button>
    <select v-model="term">
      <option value="2024-2025-1">2024-2025-1</option>
      <option value="2024-2025-2">2024-2025-2</option>
    </select>
    <table>
      <tr>
        <th>{{new Date().getMonth() + 1}}月</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
      </tr>
      <tr v-for="(slotCourses, index) in organizedCourses" :key="index">
        <th>
          <span>{{ index === 0 ? '8:00-8:45' : index === 1 ? '10:00-10:45' : index === 2 ? '14:40-15:25' : index === 3 ? '16:30-17:15' : '19:30-20:15' }}</span><br>
          <span>{{ index === 0 ? '8:55-9:40' : index === 1 ? '10:55-11:40' : index === 2 ? '15:35-16:20' : index === 3 ? '17:20-18:00' : '20:25-21:10' }}</span>
        </th>
        <td v-for="(course, dayIndex) in slotCourses" :key="dayIndex">
          <div v-if="course" @click = "showCourse(course)">
            <p>{{ course.courseName }}</p>
            <p>{{ course.location }}</p>
            <p>{{ course.teacher }}</p>
            <p v-if="!course.weeks.includes(week)">(非本周)</p>
          </div>
        </td>
      </tr>
      
    </table>
  </div>
</template>

<style scoped>
  select {
    margin-left: 20px;
  }
  table {
    margin-top: 5px;
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    width: calc(100% / 8);
    height: calc(100vh / 8.6);
  }

  th {
    background-color: #f2f2f2;
  }
</style>